<template>
  <div class="box">
    <div class="smart-clip-header">
      <div class="smart-clip-header-title_top">定制你的数字声音</div>
      <div class="smart-clip-header-desc">
        上传音频，打造专属个人的声音模型
      </div>
    </div>
    <a-spin :spinning="spinning">
      <a-row class="personal-voice">
        <!-- <a-col :span="24" class="personal-voice-title">个人声音克隆 ({{ customizedInfoList?.length || 0 }})
        </a-col> -->
        <a-col :span="24" style="display: flex;justify-content: space-between;">
          <div class="personal-voice-title">个人声音克隆 ({{ customizedInfoList?.length || 0 }})</div>
          <!-- <div @click="syncYinse" style="cursor: pointer;">同步音色</div> -->
          <a-button @click="syncYinse" type="primary" :disabled="AISpinging">同步音色</a-button>
        </a-col>
        <a-col :span="24" class="serch_title_box">
          <div class="serch_title">
            <div class="serch_left">
              <div class="serch_item">
                <a-input allow-clear @change="(e) => e.type == 'click' && getCustomizedInfoList()" style="width: 229px"
                  v-model:value="serchValue.voice_name" placeholder="请输入任务名称">
                  <template #prefix>
                    <SearchOutlined />
                  </template>
                </a-input>
              </div>

              <div class="serch_item">
                <a-select :field-names="{ label: 'label', value: 'value', options: 'children' }" style="width: 200px"
                  v-model:value="serchValue.status" :filter-option="false" @change="getCustomizedInfoList"
                  :placeholder="'请选择筛选状态'" :options="statusSelect" allow-clear>
                </a-select>
              </div>

              <div class="serch_item">
                <!-- 日期  -->
                <a-range-picker @change="timeChange" format="YYYY-MM-DD" style="width: 229px" v-model:value="time"
                  show-time />
              </div>
              <a-button type="primary" :loading="serchLoding" @click="getCustomizedInfoList">查询</a-button>
              <a-button :loading="serchLoding" @click="resetSerch">重置</a-button>
            </div>
          </div>
        </a-col>
        <a-col :span="24">
          <a-row :gutter="[32, 0]">
            <!-- demo_InfoList -->
             <template v-if="demo_InfoList.length">
              <a-col style="" class="voice_item" :span="4" v-for="item in demo_InfoList" :key="item.id">
           

                <!-- <span data-v-459c649f="" class="schedule" :style="{
                  'background-color': statusColors[String(item.status)].backgroundColor,
                  color: statusColors[String(item.status)].color
                }">
                  <sync-outlined :spin="true" v-if="[1, 2, 3, 4].includes(item.status)" />
                  {{ item.status_text }}
                </span> -->

                <div class="personal-voice-list border-solid">
                  <div class="play-box" @click.stop="playAudioClick(item, 'customizedInfoList')">
                    <cu-icon style="color: #fff;" class="icon"
                      :type="!item.isPlay ? 'icon-bofang1-copy' : 'icon-zanting'" />
                  </div>
                  <a-row style="width: 100%; padding: 0 20px 0 10px" justify="space-between" align="middle"
                    :wrap="false">
                    <a-col class="voice-text">
                      <a-space :size="10" class="name_box">
                        <a-avatar :src="item.avatar" />
                        <div class="msg_box">
                          <a-tooltip placement="top">
                            <template #title>
                              <span>{{ item.voice_name }}</span>
                            </template>
                            <span class="voice_name">{{ item.voice_name }}</span>
                          </a-tooltip>
                          <span class="voice_name_desc">校时：{{ item.updated_at }}</span>
                        </div>
                      </a-space>
                    </a-col>
                    <a-col>

                      <!-- <div class="ellipsis-outlined">
                        <a-dropdown>
                          <ellipsis-outlined style="font-size: 20px;" />
                          <template #overlay>
                            <a-menu>
                              <a-menu-item @click="ellipsisClick('edit', item)" :disabled="!item?.isEdit">
                                <a>编辑</a>
                              </a-menu-item>
                            </a-menu>
                          </template>
                        </a-dropdown>
                      </div> -->
                    </a-col>
                  </a-row>
                </div>
              </a-col>
            </template>

            <a-col style="min-width: 220px" class="text-blue" :span="4">
              <div class="personal-voice-item" @click="personalVoiceClick">
                <PlusCircleOutlined class="PlusCircleOutlined" />
                添加声音克隆
              </div>
            </a-col>

            <!-- customized_InfoList -->
            <template v-if="customizedInfoList.length">
              <a-col style="" class="voice_item" :span="4" v-for="item in customizedInfoList" :key="item.id">
                <div class="left_tag" v-show="item.type_version">
                </div>
                <span class="left_tag_text" v-show="item.type_version">{{ item.type_version }}</span>
                <span data-v-459c649f="" class="schedule" :style="{
                  'background-color': statusColors[String(item.status)]?.backgroundColor ?? 'rgb(235 235 235)',
                  color: statusColors[String(item.status)]?.color ?? '#232323'
                }">
                  <sync-outlined :spin="true" v-if="[1, 2, 3, 4].includes(item.status)" />
                  {{ item.status_text }}
               （{{ item.id }}）
                </span>
                <div class="personal-voice-list border-solid">
                  <div class="play-box" @click.stop="playAudioClick(item, 'customizedInfoList')">
                    <cu-icon style="color: #fff;" class="icon"
                      :type="!item.isPlay ? 'icon-bofang1-copy' : 'icon-zanting'" />
                  </div>
                  <a-row style="width: 100%; padding: 0 20px 0 10px" justify="space-between" align="middle"
                    :wrap="false">
                    <a-col class="voice-text">
                      <a-space :size="10" class="name_box">
                        <a-avatar :src="item.avatar" />
                        <div class="msg_box">
                          <a-tooltip placement="top">
                            <template #title>
                              <span>{{ item.voice_name }}</span>
                            </template>
                            <span class="voice_name">{{ item.voice_name }}</span>
                          </a-tooltip>
                          <span class="voice_name_desc">校时：{{ item.updated_at }}</span>
                        </div>
                      </a-space>
                    </a-col>
                    <a-col>
                      <!-- <div class="right-icon">→</div> -->
                      <div class="ellipsis-outlined">
                        <a-dropdown>
                          <ellipsis-outlined style="font-size: 20px;" />
                          <template #overlay>
                            <a-menu>
                              <a-menu-item @click="ellipsisClick('edit', item)" :disabled="!item?.isEdit">
                                <a>编辑</a>
                              </a-menu-item>
                              <a-menu-item v-if="item.isDel == 1" @click="ellipsisClick('delete', item)">
                                <a style="color: red">删除</a>
                              </a-menu-item>
                            </a-menu>
                          </template>
                        </a-dropdown>
                      </div>
                    </a-col>
                  </a-row>
                </div>
              </a-col>
            </template>
          </a-row>
        </a-col>
        <!-- 训练记录 分页 :hideOnSinglePage="true"-->
        <div style="margin-top: 20px; width: 100%; display: flex; justify-content: flex-end">
          <a-pagination :showSizeChanger="true" @change="getCustomizedInfoList" :hideOnSinglePage="true"
            v-model:current="serchValue.page" v-model:pageSize="serchValue.pageSize" :total="serchValue.total" />
        </div>
      </a-row>
    </a-spin>
  </div>
  <!-- 声音克隆 -->
  <SoundCloningDrawer :visible="soundCloningVisible"  :id="detailId" @submitChange="submitChange"
    @closeChange="closeChange" @closeFn="closeFn" />
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  onUnmounted,
  createVNode,
  ref,
  watch,
} from "vue";
import request from "@/common/utils/request";
import {
  EllipsisOutlined,
  ExclamationCircleOutlined,
  SyncOutlined,
  PlusCircleOutlined
} from "@ant-design/icons-vue";
import { message, Modal, Empty } from "ant-design-vue";
import SoundCloningDrawer from "./modules/SoundCloningDrawer.vue";
import AudioPlayer from "../../components/AudioPlayer/index.vue";
import store from "@/store/index.js";
import { syncVoice } from "@/common/utils/api/userApi.js"
import { getUserInfo } from '@/common/utils/storage.js';

export default defineComponent({
  name: "SoundCloning",
  components: { EllipsisOutlined, SyncOutlined, PlusCircleOutlined, SoundCloningDrawer, AudioPlayer },
  setup() {
    const state = reactive({
      count: 0,
      soundCloningVisible: false,
      customizedInfoList: [],
      demo_InfoList: [],
      spinning: false,
      detailId: '',
      customizedInfoGet: [],
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
      // 声音克隆列表筛选所需数据
      serchValue: {
        voice_name: '',
        status: null,
        page: 1,
        pageSize: 20,
        total: 0,
        start_time: '',
        end_time: ''
        // 性别筛选
        // gender: 'all',
        // 状态查询
      },
      // 音频所需的操作字段
      information: {
      },
      // 性别下拉列表
      genders: [],
      // 状态下拉列表
      statusSelect: [],
      // 时间选择器绑定的值
      time: [],
    });
    const AISpinging = ref(false)
    // 定义状态颜色映射
    const statusColors = reactive({
      '0': { backgroundColor: 'rgb(235 235 235)', color: '#232323' }, //未发现
      '3': { backgroundColor: 'rgb(235 235 235)', color: '#52c41a' }, //提交训练，待训练
      '4': { backgroundColor: 'rgb(235 235 235)', color: '#1677ff' }, //训练中
      '5': { backgroundColor: 'rgb(235 235 235)', color: '#52c41a' }, //训练成功
      '6': { backgroundColor: 'rgb(235 235 235)', color: '#ff4d4f' }, //训练失败
      '9': { backgroundColor: 'rgb(235 235 235)', color: '#1d39c4' }, //活跃状态
      '10': { backgroundColor: 'rgb(235 235 235)', color: '#ff4d4f' }, //提交失败
    })

    const personalVoiceClick = () => {
      state.detailId = '';
      state.soundCloningVisible = true;
    };

    const ellipsisClick = (type, item) => {
      switch (type) {
        case "edit": //编辑
          state.detailId = item.id;
          state.soundCloningVisible = true;
          break;
        case "delete":
          Modal.confirm({
            title: "确定要删除该声音吗? 删除后将无法恢复",
            icon: createVNode(ExclamationCircleOutlined),
            okText: "确定",
            cancelText: "取消",
            onOk() {
              console.log("OK");
              request
                .del("/work_ai", "/voice/customizedInfo/delete", {
                  id: item.id,
                })
                .then((res) => {
                  if (res?.code && res.code != 1000) {
                    throw new Error(res?.msg || "删除失败!");
                  }
                  message.success("删除成功");
                  // 如果是最后一条数据被删除,且不是第一页,则返回上一页
                  if (state.customizedInfoList.length <= 1 && state.serchValue.page > 1) {
                    state.serchValue.page--;
                  }
                  getCustomizedInfoList();
                }).catch((err) => {
                  message.error(err.message || "删除失败!");
                });
            },
            onCancel() {
              console.log("Cancel");
            },
          });
          break;
      }
    };

    const timeChange = (value, model) => {
      console.log(model, "时间变化");
      state.serchValue.start_time = model[0];
      state.serchValue.end_time = model[1];
      // // 日期被设为空值, 重新获取列表数据
      getCustomizedInfoList();
    };

    const timerId = ref(null)

    // 获取个人声音克隆数据
    const getCustomizedInfoList = (data = { polling: false }) => {
      if (!data.polling) {
        state.spinning = true;
      }
      if (timerId.value) {
        clearInterval(timerId.value)
        timerId.value = null
      }

      request
        .get("/work_ai", "/voice/customizedInfo/list", {
          ...state.serchValue,
          status: state.serchValue.status == 'all' ? '' : state.serchValue.status
        })
        .then((res) => {
          state.customizedInfoList = res.result.data;
          state.serchValue.total = res.result.total;
          state.spinning = false;

          const isPolling = res.result.data.some(item => item.status != 5 && item.status != 6)
          if (isPolling) {
            timerId.value = setTimeout(() => {
              getCustomizedInfoList({ polling: true })
            }, 2000)
          }
        })
        .catch((err) => {
          state.spinning = false;
        });
    };
    getCustomizedInfoList();


    // 前置数组
    const Demo_InfoList = () => {
      request
        .get("/work_ai", "/voice/customizedInfo/demo/list")
        .then((res) => {
          state.demo_InfoList = res.result.data;
          // state.serchValue.total = res.result.total;
          // state.spinning = false;

          // const isPolling = res.result.data.some(item => item.status != 5 && item.status != 6)
          // if (isPolling) {
          //   timerId.value = setTimeout(() => {
          //     getCustomizedInfoList({ polling: true })
          //   }, 2000)
          // }
        })
    }

    Demo_InfoList()

    // 播放&暂停
    const playAudioClick = (data, type) => {
      data.isPlay = !data.isPlay;
      if (data.isPlay) {
        if (state.audioPlayer) {
          state.audioPlayer.pause(); // 暂停当前播放的音频
          state.audioPlayer.src = "";
        }
        state.audioPlayer = new Audio(data.record_url || data.voice_url); // 播放下一个音频文件
        state.audioPlayer.play(); // 开始播放音频
      } else {
        state.audioPlayer.src = "";
        state.audioPlayer.pause();
      }
      state[type].forEach((voice) => {
        if (voice.id !== data.id) {
          voice.isPlay = false;
        }
      });
      if (type == "customizedInfoList") {
        state[type].forEach((voice) => {
          if (voice.id !== data.id) {
            voice.isPlay = false;
          }
        });
        state.customizedInfoGet.forEach((voice) => {
          if (voice.item) {
            voice.item.forEach((v) => {
              if (v.id !== data.id) {
                v.isPlay = false;
              }
            });
          }
        });
      } else {
        state.customizedInfoList.forEach((voice) => {
          voice.isPlay = false;
        });
        state.customizedInfoGet.forEach((voice) => {
          if (voice.item) {
            voice.item.forEach((v) => {
              if (v.id !== data.id) {
                v.isPlay = false;
              }
            });
          }
        });
      }

      if (state.audioPlayer) {
        state.audioPlayer.addEventListener("ended", function () {
          // 这里写入结束回调函数的代码
          console.log("结束语音");
          if (type == "customizedInfoList") {
            state.customizedInfoList.forEach((voice) => {
              if (voice.id == data.id) {
                voice.isPlay = false;
              }
            });
          } else {
            state.customizedInfoGet.forEach((voice) => {
              if (voice.item) {
                voice.item.forEach((item) => {
                  if (item.id == data.id) {
                    item.isPlay = false;
                  }
                });
              }
            });
          }
        });
      }
    };

    const cloneClick = () => {
      state.soundCloningVisible = true;
    };

    const submitChange = () => {
      state.soundCloningVisible = false;

      getCustomizedInfoList();
    };

    const closeChange = () => {
      state.soundCloningVisible = false;
    };

    const closeFn = () => {
       state.soundCloningVisible = false;
    }

    // 声音库列表
    const getVoiceCustomizedInfo = () => {
      state.spinning = true;
      request
        .get("/work_ai", "/voice/customizedInfo/get")
        .then((res) => {
          state.customizedInfoGet = res.result;
          state.spinning = false;
        })
        .catch((err) => {
          state.spinning = false;
        });
    };
    getVoiceCustomizedInfo();

    // 重置参数
    const resetSerch = () => {
      Object.assign(state.serchValue, {
        start_time: '',
        voice_name: '',
        status: 'all',
        page: 1,
        pageSize: 10,
        end_time: ''
      })
      getCustomizedInfoList();
    }

    // 获取所需字段
    const getRequiredInformation = () => {
      request
        .get("/work_ai", "/voice/customized/required/information")
        .then((res) => {
          console.log(res, '音频所需字段');
          state.information = res.result;
          res.result.status.select.unshift({
            label: '全部状态',
            value: 'all'
          })
          res.result.gender.select.unshift({
            label: '全部',
            value: 'all'
          })
          state.statusSelect = res.result.status.select;
          state.genders = res.result.gender.select;
          // 默认选中全部状态
          state.serchValue.status = 'all';
        });
    };
    getRequiredInformation()

    // 同步音色
    const syncYinse = () => {
      const uid = getUserInfo()?.id;
      AISpinging.value = true;
      syncVoice({
        uid: uid,
      }).then(res => {
          console.log(res,'同步音色记录');
          if(res.errno === 0){
            message.success('同步成功');
            AISpinging.value = false;
            resetSerch();
          }else{
            message.error(res.msg);
            AISpinging.value = false;
            }
      }).catch(err => {
        message.error(err);
        AISpinging.value = false;
      })
      
    }

    // 页面卸载
    onUnmounted(() => {
      console.log("页面卸载");
      // 语音暂停播放
      if (state.audioPlayer) {
        state.audioPlayer.pause();
      }
      if (timerId.value) {
        clearInterval(timerId.value)
        timerId.value = null
      }
    });
    watch(()=>store.getters.applicationMaterialData,(data)=>{
      if(Object.keys(data).length){
       setTimeout(() => {
        state.soundCloningVisible = true; 
       },200)
        
      } 
    },{deep:true,immediate:true})
    onUnmounted(() => {
     store.dispatch("setApplicationMaterialData",{}) 
    })
    return {
      ...toRefs(state),
      ellipsisClick,
      statusColors,
      timerId,
      resetSerch,
      timeChange,
      cloneClick,
      closeChange,
      personalVoiceClick,
      playAudioClick,
      submitChange,
      getVoiceCustomizedInfo,
      getCustomizedInfoList,
      closeFn,
      syncYinse,
      AISpinging
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ss-avatar) {
  height: 58px;
  width: 58px;
}

.text-blue {
  color: rgba(40, 120, 255, 1);
}

.personal-voice-title {
  font-size: 16px;
  font-weight: 600;
}

.serch_title_box {
  margin-top: 20px;

  // table 头部的筛选
  .serch_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    // margin-top: 10px;
    margin-bottom: 20px;

    .serch_left {
      display: flex;
      gap: 0 10px;

      .serch_item {
        display: flex;
        justify-content: center;
        align-items: center;

        .left_prefix {
          padding: 0 25px;
          background-color: #ffffff;
          line-height: 30px;
          border: 1px solid #d9d9d9;
          border-right: none;
        }
      }
    }
  }

}

.box {
  padding: 10px;

  // 头部
  .smart-clip-header {
    padding: 30px;
    border-radius: 12px;
    // height: 180px;
    min-width: 1140px;
    // margin-top: 20px;
    background: linear-gradient(220deg, #f3f7ff, rgba(159, 191, 255, 0.4));
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;

    .smart-clip-header-title_top {
      font-size: 24px;
      color: #0c0d0e;
      line-height: 1.5;
    }

    .smart-clip-header-desc {
      font-size: 14px;
      color: #737a87;
      margin-top: 5px;
      line-height: 1.5;
    }

    .smart-clip-header-btngroup {
      margin-top: 15px;
    }
  }

  .personal-voice {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;

    .personal-voice-item {
      margin-top: 30px;
      height: 112px;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      border: 1px dashed rgba(222, 222, 222, 1);
      cursor: pointer;
      font-size: 16px;
      ;
      font-weight: 500;

      .PlusCircleOutlined {
        font-size: 30px;
        color: #2878ff;
        line-height: 30px;
      }

      &.border-solid {
        border: 1px solid rgba(222, 222, 222, 1);
      }
    }

    // 每一个声音卡片
    .voice_item {
      min-width: 220px;
      position: relative;
      overflow: hidden;

      // 左上角 角标
      .left_tag {
        position: absolute;
        top: 15px;
        left: 13px;
        width: 0;
        height: 0;
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-right: 25px solid var(--ss-primary-4);
        transform: rotate(45deg);
        z-index: 999;
      }

      .left_tag_text {
        position: absolute;
        top: 34px;
        left: 20px;
        color: #fff;
        z-index: 999;
        font-size: 10px;
      }

      .schedule {
        position: absolute;
        right: 16px;
        top: 30px;
        z-index: 10;
        background-color: var(--ss-primary-4);
        color: #fff;
        font-size: 11px;
        padding: 2px 8px;
        border-radius: 0 0 0 8px;
      }

      // .left_subscript {
      //   position: absolute;
      //   left: 0;
      //   top: 0;
      //   width: 0;
      //   /* 宽度为0 */
      //   height: 0;
      //   /* 高度为0 */
      //   border-left: 20px solid transparent;
      //   /* 左边框透明 */
      //   border-top: 20px solid transparent;
      //   /* 上边框透明 */
      //   border-right: 20px solid transparent;
      //   /* 右边框透明 */
      //   border-bottom: 20px solid greenyellow;
      //   /* 底边框为绿色 */
      // }
    }

    .personal-voice-list {
      margin-top: 30px;
      padding: 25px 00px;
      // height: 82px;
      border-radius: 5px;
      justify-content: center;
      align-items: center;
      border: 1px dashed rgba(222, 222, 222, 1);
      cursor: pointer;
      position: relative;
      background-color: #f6f6f7;

      &.border-solid {
        border: 1px solid rgba(222, 222, 222, 1);
      }

      .voice-text {
        font-weight: 500;


        .name_box {
          width: 100%;
          display: flex;
          // flex-direction: column;
          justify-content: space-between;
          overflow: hidden;

          .msg_box {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            height: 60px;

            .voice_name {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              width: auto;
              margin-right: 10px;
            }

            .voice_name_desc {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              // -webkit-line-clamp: 1;
              // -webkit-box-orient: vertical;
              width: auto;
              min-width: 104;
              margin-right: 4px;
              font-size: 12px;
            }
          }
        }
      }

      .right-icon {
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background: #2b7aff;
        color: #fff;
        display: none;
      }

      .ellipsis-outlined {
        text-align: right;
        font-size: 16px;
      }

      &.personal-voice-list:hover {
        .right-icon {
          display: flex;
        }
      }

      .play-box {
        position: absolute;
        width: 41px;
        height: 41px;
        left: -2px;
        top: 50%;
        transform: translateY(-50%);
        display: none;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        margin-left: 20px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.3);
        z-index: 19;
        padding-left: 2px;

        .icon {
          color: #fff;
        }
      }

      &.personal-voice-list:hover {
        .play-box {
          display: flex;
        }
      }
    }
  }

  .sound-library {
    margin-top: 65px;

    .sound-library-list {
      margin-top: 30px;
      padding-left: 20px;
      height: 82px;
      display: flex;
      border-radius: 5px;
      justify-content: left;
      align-items: center;
      border: 1px solid rgba(222, 222, 222, 1);
      cursor: pointer;
      position: relative;

      .right-badge {
        position: absolute;
        top: 0;
        right: 0;
        width: auto;
        height: 20px;
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 12px;
        border-radius: 2px;
        background: #ff9c00;
      }

      .play-box {
        position: absolute;
        width: 32px;
        height: 32px;
        display: none;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        padding-left: 2px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.3);
      }

      &.sound-library-list:hover {
        .play-box {
          display: flex;
        }
      }
    }

    .n-tab-pane {
      display: flex;
      padding-top: 20px;
      padding-left: 20px;

      .group-box {
        display: flex;
        align-items: center;
        width: 190px;
        height: 80px;
        padding: 30px 15px;
        margin-bottom: 40px;
        margin-right: 40px;
        border-radius: 5px;
        border: 1px solid #d9d9d9;
        cursor: pointer;
        position: relative;

        &.group-border {
          border: 1px solid #436ba0;
        }

        .avatar {
          margin-right: 5px;
        }

        .mask {
          position: absolute;
          top: 23px;
          left: 15px;
          width: 32px;
          height: 32px;
          z-index: 10;
          border-radius: 50%;
          background: rgba(0, 0, 0, 0.3);
          display: none;

          .icon {
            margin-left: 8px;
            margin-top: 6px;
            color: #fff;
            font-size: 18px;
          }

        }

        :hover {
          .mask {
            display: block;
          }
        }

        .right-badge {
          position: absolute;
          top: 0;
          right: 0;
          width: auto;
          height: 20px;
          padding: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 12px;
          border-radius: 2px;
          background: #ff9c00;
        }
      }
    }
  }
}
</style>
